import { useState, useEffect } from 'react';
import { formatActicityType } from '@/utils';
// 样式
import styles from '@/styles/ShoppingCart.module.scss';
// 组件
import Item from './OrderItem';

// part component
const PartItem = ({ data }) => {
    const { activityName, algorithms, title, reducePrice, goodsCartActivityListDTO } = data;
    const Title = algorithms ? (
        <div className={styles['thead']}>
            <span>{formatActicityType(algorithms)}</span>
            <span>{activityName}</span>
            <span title={title}>【{title}】</span>
            <em>预计可享受优惠：<span>￥</span><span>{reducePrice || 0}</span></em>
        </div>
    ) : ""
    return (
        <div className={styles['part']}>
            { Title }
            {
                !!goodsCartActivityListDTO?.length &&
                goodsCartActivityListDTO.map(item => {
                    return <Item key={item.id} data={item} />
                })
            }
        </div>
    )
}

const OrderList = () => {

    const [cartList, setCartData] = useState([]);

    useEffect(() => {
        const dataList = JSON.parse(sessionStorage.getItem('cartList') || '[]');
        setCartData([...dataList]);
    }, []);

    return (
        <div className={styles['table-body']}>
            {
                cartList.map((item, index) => {
                    return <PartItem key={index} data={item} />
                })
            }
        </div>
    )
}

export default OrderList;